---
title: Επιλογέας Εικονιδίων
image: /images/user-guide/github/github-header.png
---

<Frame>
  <img src="/images/user-guide/github/github-header.png" alt="Header" />
</Frame>

Ένας επιλογέας εικονιδίων βασισμένος σε αναδυόμενη λίστα που επιτρέπει στους χρήστες να επιλέξουν ένα εικονίδιο από μια λίστα.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import React, { useState } from "react";
import { IconPicker } from "@/ui/input/components/IconPicker";

export const MyComponent = () => {

   const [selectedIcon, setSelectedIcon] = useState("");
   const handleIconChange = ({ iconKey, Icon }) => {
     console.log("Selected Icon:", iconKey);
     setSelectedIcon(iconKey);
   };

  return (
    <RecoilRoot>
      <IconPicker
        disabled={false}
        onChange={handleIconChange}
        selectedIconKey={selectedIcon}
        variant="primary"
      />
    </RecoilRoot>
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες                     | Τύπος         | Περιγραφή                                                                                                                                                  |
| ----------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled                      | boolean       | Απενεργοποιεί την επιλογή εικονιδίων αν οριστεί σε `true`                                                                                                  |
| κατά την αλλαγή               | λειτουργία    | Η συνάρτηση ανάκλησης που ενεργοποιείται όταν ο χρήστης επιλέξει ένα εικονίδιο. Λαμβάνει ένα αντικείμενο με ιδιότητες `iconKey` και `Icon` |
| κλειδί επιλεγμένου εικονιδίου | αλφαριθμητικό | Το κλειδί του αρχικά επιλεγμένου εικονιδίου                                                                                                                |
| onClickOutside                | συνάρτηση     | Συνάρτηση ανάκλησης που ενεργοποιείται όταν ο χρήστης κάνει κλικ εκτός της αναδιπλούμενης λίστας                                                           |
| onClose                       | συνάρτηση     | Συνάρτηση ανάκλησης που ενεργοποιείται όταν η αναδιπλούμενη λίστα κλείνει                                                                                  |
| onOpen                        | συνάρτηση     | Συνάρτηση ανάκλησης που ενεργοποιείται όταν η αναδιπλούμενη λίστα ανοίγει                                                                                  |
| "variant"                     | αλφαριθμητικό | The visual style variant of the clickable icon. Οι επιλογές περιλαμβάνουν: `primary`, `secondary`, και `tertiary`          |

</Tab>
</Tabs>
